<!DOCTYPE html>
<html>
<<template "_head.html">>

<el-main style="background-color: #F5F5F5;">

		    	
				  <el-row :gutter="20" style="margin-bottom: 8px;">
          <el-col :span="24"><div class="grid-content host_table">
              <h4> > Alarm</h4>
              <el-row :gutter="20">

                <!-- <el-col :span="3" style="margin-top: 8px;">
                  <template>
                    <el-switch
                      v-model="switchvalue"
                      active-text="未读"
                      inactive-text="已读"
                      >
                    </el-switch>
                  </template>
                </el-col> -->


                <el-col :span="6">
                  <template>
                    <span class="demonstration">类型筛选</span>
                    <el-select
                      v-model="value2"
                      multiple
                      collapse-tags
                      style=""
                      placeholder="请选择Alarm类型">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        >
                      </el-option>
                    </el-select>
                  </template>
                </el-col>

                <el-col :span="8">
                  <div class="block">
                    <span class="demonstration">日期筛选</span>
                    <el-date-picker
                      v-model="value2Date"
                      type="daterange"
                      align="right"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions">
                    </el-date-picker>
                  </div>
                </el-col>

                <el-col :span="4" style="">
                    <el-button type="primary">筛选</el-button>
                </el-col>

              </el-row>

              <template>
              <el-table
                :data="tableData"
                :row-class-name="tableRowClassName"
                height="66%"
                border
                :header-cell-style="{background:'#606266',color:'#fff'}"
                style="width: 100%">
                <el-table-column
                  prop="time"
                  label="时间"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="slve"
                  label="Slve"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="type"
                  label="类型"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="messg"
                  label="内容">
                </el-table-column>
                <!--cpu  mem  -->
                 <el-table-column
                  fixed="right"
                  label="操作"
                  width="200">
                  <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
                    <el-button type="text" size="small">已读</el-button>
                    <el-button type="text" size="small">监控</el-button>
                    <el-button type="text" size="small">通知</el-button>
                  </template>
                </el-table-column>
              </el-table>
              
              <template>
                <div class="block" style="margin-top: 16px;">
                  <span class="demonstration"></span>
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage1"
                    :page-size="100"
                    layout="total, prev, pager, next, jumper"
                    :total="1000">
                  </el-pagination>
                </div>
              </template>
            
            </template>
            
            

          </div></el-col>
        </el-row>

		    </el-main>

		 <!--  <el-footer style="background-color: #000; " >aas</el-footer> -->
		</el-container>

	</div>

</body>

<script type="text/javascript">
let url = window.location.pathname;
new Vue({
	el:"#app",
	data:{
	     menu:Enum(url),
	      tableData: [],
        currentPage1: 1,
        options: [{
          value: '1',
          label: '通知消息'
        }, {
          value: '2',
          label: '完成'
        }, {
          value: '3',
          label: '失败'
        }, {
          value: '4',
          label: '异常'
        }, {
          value: '5',
          label: '警报'
        }],
        value2: [],
        switchvalue: true,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2Date:''
       
	},
	methods:{
		handleSelect(key, keyPath) {
        	console.log(key, keyPath);
      	},
      	handleOpen(key, keyPath) {
	        console.log(key, keyPath);
	        window.location.href=keyPath;
	    },
	    handleClose(key, keyPath) {
	        console.log(key, keyPath);
	    },
	     tableRowClassName({row, rowIndex}) {
	     	console.log(row)
        if (row.type === 1) {
          return 'warning-row';
        } else if (row.type === 3) {
          return 'success-row';
        }
        return '';
      },
      handleClick(row) {
        console.log(row);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.getlist(val);
      },
      getlist: function(pg){
          let _this = this;
          let state = 1;
          if (!_this.switchvalue){
            state = 2;
          }
          let urlStr = '/api/alarm/v1/list?page='+pg+'&state='+state;
          $.ajax({
            type:'get',
            url:urlStr,
            dataType:'json',
            contentType: "application/json",
            async:false,
            success:function (json){
              console.log(json);
              _this.tableData = json.data;
            },
            error:function (){
              //弹错误框
              console.log("请求失败");
            }
          });
      }
	},
  mounted:function(){
    this.getlist(1);
  }
})
</script>

</html>